<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@page import="java.util.List"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui-v2.6.13/layui/css/layui.css"/>
		<script type="text/javascript" type="text/css"  src="${pageContext.request.contextPath}/js/jquery.min-2.1.1.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/layui-v2.6.13/layui/layui.js"></script>
	</head>
	<body>
		<div style="padding: 20px;">
			<div >
				<form class="layui-form" action="s">
				<input type="hidden" value="listPage" name="m">
					<div class="layui-inline">
						<input type="text" class="layui-input" placeholder="请输入学生姓名" name="uName" value="${uName}">
					</div>
					
					<div class="layui-inline">
						<select name="sYear">
							<option value="">年级</option>
							<c:forEach items="${ys}" var="year">
								<option value="${year.sYear}">${year.sYear}</option>
							</c:forEach>
						</select>
					</div>
					<div class="layui-inline">
						<select name="collegeId" lay-filter="f1">
							<option value="">学院</option>
							<c:forEach items="${cs}" var="colg">
								<option value="${colg.collegeId}">${colg.sName}</option>
							</c:forEach>
						</select>
					</div>
					<div class="layui-inline">
						<select id="major" name="majorId">
							<option value="">专业</option>
						</select>
					</div>
					<button class="layui-btn">查询</button>
				</form>
				<br>
				<button class="layui-btn" onclick="add()">添加</button>
				<button class="layui-btn" onclick="downloadExcel();">导出表格</button>
			</div>		
			<div>
				<table class="layui-table">
					
					<thead>
						<tr>
							<th>
								<input type="checkbox">
							</th>
							<th>id</th>
							<th>学生姓名</th>
							<th>性别</th>
							<th>年级</th>
							<th>学院</th>
							<th>专业</th>
							<th>班级</th>
							<th>就业单位</th>
							<th>就业城市</th>
							<th>岗位</th>
							<th>薪资</th>
							<th>企业类型</th>
							<th>状态</th>
							
						</tr> 
					</thead>
					<tbody>
					<c:forEach items="${list}" var="obj">
						<tr>
							<td><input type="checkbox"></td>
							<td>${obj.id}</td>
							<td>${obj.uName}</td>
							<td>${obj.sex }</td>
							<td>${obj.sYear }</td>
							<td>${obj.collegeId }</td>
							<td>${obj.majorId }</td>
							<td>${obj.classNo }</td>
							<td>${obj.company }</td>
							<td>${obj.city }</td>
							<td>${obj.sPost }</td>
							<td>${obj.wages }</td>
							<td>${obj.companyType }</td>
							<td>
								<button class="layui-btn" onclick="insert(${obj.id})">更新</button>
							</td>
						</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<div id="limitPage" align="center">
				<button class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" onclick="queryByPageNo(1,${totalPage});">首页</button>
				<button class="layui-btn layui-btn-sm" onclick="queryByPageNo(${pageNo-1},${totalPage});">上一页</button>
				<span class="layui-font-16" >${pageNo}/ ${totalPage}页</span>
				<button class="layui-btn layui-btn-sm" onclick="queryByPageNo(${pageNo+1},${totalPage});">下一页</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" onclick="queryByPageNo(${totalPage},${totalPage});">尾页</button>
			</div>
		</div>
	</body>
	<script >
	function queryByPageNo(pageNo,totalPage){
		var params =$("form").serialize();
		if(pageNo<1) pageNo=1;
		if(totalPage<pageNo) pageNo =totalPage;
		window.location.href="s?"+params+"&pageNo="+pageNo;
		
		}
	
	</script>
	<script>
		layui.use(['layer','form'], function(){
			var layer = layui.layer;
			var form = layui.form;
		  
			form.on('select(f1)', function(data){
				console.info(data.elem); //得到select原始DOM对象
				console.info(data.value); //得到被选中的值
				
				var params = "m=listOfCollegeId&collegeId=" + data.value;
				$.ajax({
					url: "major",
					data: params,
					type: "POST",
					success: function(obj){
						//将json字符串转为数组
						var arr = JSON.parse(obj);
						
						//清空子元素
						$("#major").empty();
						//添加子元素
						$.each(arr,function(index, item){
							console.info(item);
							//在元素内部末尾插入子元素
							$("#major").append("<option value='"+item.collegeId+"'>"+item.cName+"</option>");
						});
						//重新渲染select下拉框
						form.render('select');
					}	
				});
			}); 
			});  
			//执行一个laypage实例
			//laypage.render({
			//	elem: 'limitPage', //注意，这里的 test1 是 ID，不用加 # 号
			//	count: 50, //数据总数，从服务端得到
			//	limit: 10,//每页显示的条数	
			//});
		//});
		function add(){
			layui.use('layer',function(){
				layer.open({
					type:2,
					title:'增加',
					content:'s?m=addPage',
					area:['1000px','500px']
				});
			})
		}
		function insert(id){
			layui.use('layer',function(){
				layer.open({
					type:2,
					title:'更改',
					content:'s?m=insertPage&id='+id,
					area:['1000px','500px']
				});
			})
		}
		function downloadExcel(){
			window.location.href="s?m=download";
		}
		
	</script>
</html>